<!DOCTYPE html>
<html>
<head>
    <title>正六边形</title>
    <meta charset="utf-8">
</head>
<body>
<div>
    多边形：边数<select name="Number" id="edges">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>
</div>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script type="text/javascript">
    var canvas = document.querySelector('#canvas'),
            context = canvas.getContext('2d');


    // 定义边长、颜色、边数、canvas大小
    var length = 100, fillColor = '#000', vertices = 7, size = 1000;
    canvas.width = size;
    canvas.height = size;

    var getDegree = function(vertices, index) {
        return 360 / vertices * (i + 0.5) + 90;
    }

    var getRadian = function(degree) {
        return degree * Math.PI / 180;
    };

    context.beginPath();
    for (var i = 0; i < vertices; i++) {
        // 计算偏转
        var degree = getDegree(vertices, i),
                radian = getRadian(degree);

        // 增加1/3的canvas大小位移量以免被边缘挡住
        var x = Math.cos(radian) * length ;
        var y = Math.sin(radian) * length ;
        context.lineTo(x, y);
    }
    context.closePath();
    context.stroke();
</script>
</html>